<template>
	<view class="warp">
		<view class="header" :style="{backgroundImage:'url('+tui.website+'static/home/img/topbg4.png)',paddingTop:top+'px'}">
			<view class="page-title" style="padding: 20upx 0 20upx 0;color: #FFF;font-size: 18px;font-weight: 400;">
				客户记录
			</view>
			<view class="mycard">
				<tui-tabs itemWidth="33.3333%" :width="winWidth - 20" :tabs="tabs" :currentTab="currentTab" @change="changeTab" sliderBgColor="#f42632" selectedColor="#000" :size="36" bold></tui-tabs>
				<view class="search">
					<view class="">
						<view class="searchbox">
							<view class="tui-input-title pull-left">						
							<tui-icon name="search-2" :size="40" unit="rpx" color="#a4a4a4"></tui-icon></view>
							<input placeholder-style="color: #a4a4a4;font-size:28upx" @confirm="searchUser" value="" confirm-type="search" type="text" class="tui-input pull-left" placeholder="搜索客户名/手机号" v-model="kw" placeholder-class="tui-phcolor" />
						</view>
					</view>
					<view class="" style="padding: 20upx;width: 80px;color: #a4a4a4;font-size: 26upx;">共{{total_user}}条</view>
					<view class="btn-items">
						<tui-icon name="friendadd" color="#f42632" :size="48" unit="rpx" @click="openPage('adduser')"></tui-icon>
						<tui-icon name="screen" margin="0 0 0 12px" color="#f42632" @click="visible =true" :size="48" unit="rpx"></tui-icon>
					</view>
				</view>
			</view>
		</view>
		<tui-drawer mode="right" :mask="true" :visible="visible" @close="closeDrawer" class="right-drawer">
		  <scroll-view class="right-drawer-container" :scroll-y='true'>
			  <view style="width: 100%;height: 25px;"></view>
			  <!-- <view class="sel-li tui-flex under-line" @click="getShopList">
				 <text>门店</text> 
				 <view class="li-text" @click="getShopList">{{filter.shop}}
				 </view>
				 <tui-icon name="arrowright" :size="22"></tui-icon>
			  </view>
			  <view class="sel-li tui-flex under-line" @click="getLeaderList">
				 <text>员工</text> 
				 <view class="li-text" @click="getLeaderList">{{filter.leader}}
				 </view>
				 <tui-icon name="arrowright" :size="22"></tui-icon>
			  </view> -->
			  <view class="sel-li tui-flex under-line" @click="getTagsList">
				 <text>客户标签</text> 
				 <view class="li-text" @click="getTagsList">{{filter.tag}}
				 </view>
				 <tui-icon name="arrowright" :size="22"></tui-icon>
			  </view>
			  <view class="sel-li tui-flex under-line" @click="showChooseCity">
				 <text>地区</text> 
				 <view class="li-text" @click="showChooseCity">{{filter.city}}
				 </view>
				 <tui-icon name="arrowright" :size="22"></tui-icon>
			  </view>
			  <view class="sel-li under-line">
				  <view>客户等级</view>
				  <view class="sel-option-box">
					  <view class="sel-option-val" :class="{active:params.group==-1}" @click="changeParams('group',-1)">全部</view>
					  <view class="sel-option-val" :class="{active:params.group===0}" @click="changeParams('group',0)">普通会员</view>
					  <view class="sel-option-val" :class="{active:params.group==item.id}" v-for="(item,index) in group_list" @click="changeParams('group',item.id)">{{item.groupname}}</view>
				  </view>
			  </view>
			  <view class="sel-li under-line">
				  <view>客户来源</view>
				  <view class="sel-option-box">
					  <view class="sel-option-val" :class="{active:params.source==-1}" @click="changeParams('source',-1)">全部</view>
					  <view class="sel-option-val" :class="{active:params.source==index}" v-for="(item,index) in source_list" :key='item' @click="changeParams('source',index)">{{item}}</view>
				  </view>
			  </view>
			  <view class="sel-li under-line">
				  <view>客户生日</view>
				  <view class="sel-option-box">
					  <view class="sel-option-val" :class="{active:params.bri==-1}" @click="changeParams('bri',-1)">全部</view>
					  <view class="sel-option-val" :class="{active:params.bri==1}"  @click="changeParams('bri',1)">今天</view>
					  <view class="sel-option-val" :class="{active:params.bri==2}"  @click="changeParams('bri',2)">明天</view>
					  <view class="sel-option-val" :class="{active:params.bri==3}"  @click="changeParams('bri',3)">本周</view>
					  <view class="sel-option-val" :class="{active:params.bri==4}"  @click="changeParams('bri',4)">下周</view>
					  <view class="sel-option-val" :class="{active:params.bri==5}"  @click="changeParams('bri',5)">本月</view>
					  <view class="sel-option-val" :class="{active:params.bri==6}"  @click="changeParams('bri',6)">下月</view>
				  </view>
			  </view>
			  <view class="sel-li under-line">
				  <view>创建时间</view>
				  <view class="sel-option-box">
					  <view class="sel-option-val" :class="{active:params.ct==-1}" @click="changeParams('ct',-1)">全部</view>
					  <view class="sel-option-val" :class="{active:params.ct==1}"  @click="changeParams('ct',1)">今天</view>
					  <view class="sel-option-val" :class="{active:params.ct==2}"  @click="changeParams('ct',2)">昨天</view>
					  <view class="sel-option-val" :class="{active:params.ct==3}"  @click="changeParams('ct',3)">本周</view>
					  <view class="sel-option-val" :class="{active:params.ct==4}"  @click="changeParams('ct',4)">本月</view>
					  <view class="sel-option-val" :class="{active:params.ct==5}"  @click="changeParams('ct',5)">上月</view>
				  </view>
			  </view>
			  <view class="sel-li under-line">
				  <view>消费次数</view>
				  <view class="sel-option-box">
					  <view class="sel-option-val" :class="{active:params.onum==-1}" @click="changeParams('onum',-1)">全部</view>
					  <view class="sel-option-val" :class="{active:params.onum==1}"  @click="changeParams('onum',1)">1次及以内</view>
					  <view class="sel-option-val" :class="{active:params.onum==3}"  @click="changeParams('onum',3)">3次及以内</view>
					  <view class="sel-option-val" :class="{active:params.onum==5}"  @click="changeParams('onum',5)">5次及以内</view>
				  <view class="input-box">
				  	<input type="text" value="" v-model="params.onum1" @input="clearParam('onum')" />
				  	<tui-icon name="reduce" :size="16" style="display: inline-block;vertical-align: 6px;"></tui-icon>
				  	<input type="text" value="" v-model="params.onum2" @input="clearParam('onum')"/>
				  	<text style="vertical-align: 6px;margin-left: 5px;">次</text>
				  </view>
				  </view>
			  </view>
			  <view class="sel-li under-line">
				  <view>消费总额</view>
				  <view class="sel-option-box">
					  <view class="sel-option-val" :class="{active:params.pay==-1}" @click="changeParams('pay',-1)">全部</view>
					  <view class="sel-option-val" :class="{active:params.pay==1}"  @click="changeParams('pay',1)">1K及以内</view>
					  <view class="sel-option-val" :class="{active:params.pay==2}"  @click="changeParams('pay',2)">2K及以内</view>
					  <view class="sel-option-val" :class="{active:params.pay==5}"  @click="changeParams('pay',5)">5K及以内</view>
						<view class="input-box">
							<input type="text" value="" v-model="params.pay1" @input="clearParam('pay')" />
							<tui-icon name="reduce" :size="16" style="display: inline-block;vertical-align: 6px;"></tui-icon>
							<input type="text" value="" v-model="params.pay2" @input="clearParam('pay')"/>
							<text style="vertical-align: 6px;margin-left: 5px;">元</text>
						</view>
				  </view>
			  </view>
			  <view class="sel-li under-line">
				  <view>储值卡余额</view>
				  <view class="sel-option-box">
					  <view class="sel-option-val" :class="{active:params.cm==-1}" @click="changeParams('cm',-1)">全部</view>
					  <view class="sel-option-val" :class="{active:params.cm==1}"  @click="changeParams('cm',1)">1K及以内</view>
					  <view class="sel-option-val" :class="{active:params.cm==2}"  @click="changeParams('cm',2)">2K及以内</view>
					  <view class="sel-option-val" :class="{active:params.cm==5}"  @click="changeParams('cm',5)">5K及以内</view>
					  <view class="input-box">
						<input type="text" value="" v-model="params.cm1" @input="clearParam('cm')" />
						<tui-icon name="reduce" :size="16" style="display: inline-block;vertical-align: 6px;"></tui-icon>
						<input type="text" value="" v-model="params.cm2" @input="clearParam('cm')"/>
						<text style="vertical-align: 6px;margin-left: 5px;">元</text>
					  </view>
				  </view>
			  </view> 
			  <view class="sel-li under-line">
				  <view>剩余次数</view>
				  <view class="sel-option-box">
					  <view class="input-box">
							<input type="text" value="" v-model="params.cnum1" />
							<tui-icon name="reduce" :size="16" style="display: inline-block;vertical-align: 6px;"></tui-icon>
							<input type="text" value="" v-model="params.cnum2" />
							<text style="vertical-align: 6px;margin-left: 5px;">次</text>
					  </view>
				  </view>
			  </view>
			  <view style="display: flex;justify-content: flex-end;" class="btn-group">
					<view class="rest" @click="rest">重置</view>
					<view class="sub" @click="sub">确认</view>
			  </view>
			
		  </scroll-view>
		</tui-drawer>
		<tui-drawer mode="right" :mask="true" :visible="visible_shop" @close="closeShopDrawer" class="right-drawer">
		  <view class="right-drawer-container">
			  <view class="tui-title" style="line-height: 30px;">
				 <tui-icon name="arrowleft" @click="closeShopDrawer"></tui-icon> <text style="vertical-align: 6px;">门店列表</text>
			  </view>
			  <view class="shop-lists">
				  <view v-for="(shop,index) in shop_list" @click="choosThisShop(shop.id,shop.name)" style="color:#FFF ;display:inline-block;padding: 5px 10px;background: #fc0f4a;font-size: 14px;margin: 5px;    border-radius: 6px;">
					  {{shop.name}}
				  </view>
			  </view>
		  </view>
		</tui-drawer>
		<tui-drawer mode="right" :mask="true" :visible="visible_leader" @close="closeLeaderDrawer" class="right-drawer">
		  <view class="right-drawer-container">
			  <view class="tui-title" style="line-height: 30px;">
				 <tui-icon name="arrowleft" @click="closeLeaderDrawer"></tui-icon> <text style="vertical-align: 6px;">员工列表</text>
			  </view>
			  <view class="shop-lists">
				  <view v-for="(leader,index) in leader_list" @click="choosThisLeader(leader.id,leader.nickname)" style="color:#FFF ;display:inline-block;padding: 5px 10px;background: #fc0f4a;font-size: 14px;margin: 5px;    border-radius: 6px;">
					  {{leader.nickname}}
				  </view>
			  </view>
		  </view>
		</tui-drawer>
		<tui-bottom-popup class="overflow-y tag-drawer" :show="showTagsSelectStatus" :height="800" :maskZIndex="99999" :zIndex="100000" :radius="true" @close="showTagsSelectStatus=false;search_tag_val='';" :mask="true">
			<view style="padding: 10px;padding-bottom: 0;">
				<view class="searchbox">
					<input type="text"  v-model="search_tag_val" @input="searchTag" placeholder="输入关键字" />
				</view>
			</view>
			<scroll-view class="tags-box" scroll-y="true">
				<view class="tags-item" v-for="(item, index) in tagsList"
					:key="index" :data-index="index" v-if="tagsList.length>0">
					<tui-divider dividerColor="red" gradual>{{item.name }}</tui-divider>
					<view class="lists">
						<view class="tag-one" v-for="(tag ,ind) in item.tags" :key="ind" @tap.stop="chooseTag(tag)">
							{{tag}}
						</view>
					</view>
				</view>
			</scroll-view>
		</tui-bottom-popup>
		<tui-bottom-popup :show="city_show" backgroundColor="transparent" @close="closeCity" :maskZIndex="99999" :zIndex="100000">
			<view class="tui-header">
				<view>选择城市</view>
				<icon type="clear" :size="16" color="#c0c0c0" class="tui-icon-close" @tap="closeCity"></icon>
			</view>
			<tui-cascade-selection :size="26" :textSize="24" :itemList="city" :reset="resetCity" request @change="nextCity" :receiveData="citylist" @complete="chooseCity"></tui-cascade-selection>
		</tui-bottom-popup>
		<view class="mycard rank">
			<block v-for="(item,idx) in dataList" :key="item.id">
			<tui-list-cell unlined :unlined="true" :size="28">
				<view class="tui-item-box" >
					<image :src="item.avatar" class="tui-msg-pic" mode="aspectFill" @click="detail(item.id)"></image>
					<view class="center" @click="detail(item.id)">
						<view class="username" style="font-weight: 700;display: flex;"><text>{{item.username}}</text>
						<image :src="item.lv_img" mode="widthFix" style="width: 30px;"></image></view>
						<view class="tui-flex-box">
							<tui-tag size="24rpx" padding="12rpx" type="white">消费{{item.payout}}元</tui-tag>
							<tui-tag size="24rpx" padding="12rpx" type="white">消费{{item.order_num}}次</tui-tag>
							<tui-tag size="24rpx" padding="12rpx" type="white">顾问：{{item.leader}}</tui-tag>
						</view>
						<view class="tui-flex-box" style="margin-bottom: 20rpx;">
							<tui-tag size="24rpx" padding="12rpx" type="white">余额{{item.money}}元</tui-tag>
						</view>
						<view class="tui-flex-box">
							<tui-tag margin="0 5px 5px 0" size="24rpx" :type="tag_type[ind%4]" padding="12rpx" v-for="(tag,ind) in item.tags" v-if="tag!=''">{{tag}}</tui-tag>
						</view>
					</view>
					<view class="tel" v-if="item.mobile" @click="tel(item.mobile)">
						<image src="../../static/images/icon/tel.png" mode="widthFix" class="tel-ico"></image>
					</view>
				</view>
			</tui-list-cell>
			</block>
		</view>
	</view>
</template>

<script>
	const cityData = require('@/common/city.js');
	export default {
		data() {
			return {
				top:0,
				winWidth:0,
				currentTab:0,
				telnumber:'1365329662',
				tabs: [{
					name: "会员"
				}, {
					name: "潜客"
				}, {
					name: "公海"
				}],
				kw:'',
				page:1,
				last_page:2,
				dataList:[],
				tag_type:[
					'light-blue','light-brownish','light-orange','light-green',
				],
				//赛选参数
				params:{shop:0,leader:0,cm1:'',cm2:'',cnum1:'',cnum2:''},
				old_params:{shop:0,leader:0,cm1:'',cm2:'',cnum1:'',cnum2:''},
				filter:{shop:'请选择门店',leader:'选择员工'},
				old_filter:{shop:'请选择门店',leader:'选择员工'},
				//右侧抽屉
				visible:false,//赛选
				visible_shop:false,//选择门店
				visible_leader:false,//选择门店
				shop_list:[],
				leader_list:[],
				showTagsSelectStatus:false,//标签
				tagsList:[],//标签列表
				oldTagsList:[],//标签列表//用于搜索过滤复原
				search_tag_val:'',
				group_list:[],//赛选里面的等级列表
				source_list:[],//客户来源
				city_show:false,
				resetCity:0,
				city:cityData,
				citylist:[],
				cityString:'',
				total_user:0,
				
			}
		},
		created() {
			setTimeout(() => {
				// 高度自适应
				uni.getSystemInfo({
					success: (res) => {
						this.winWidth = res.windowWidth;
					}
				});
			}, 50);
		},
		onShow() {
			this.tui.chkAuth();
			this.getList();
			this.getGroupList();
			this.getSourceList();
		},
		onLoad() {
			let obj = {};
			// #ifdef MP-WEIXIN
			obj = wx.getMenuButtonBoundingClientRect();
			// #endif
			// #ifdef MP-BAIDU
			obj = swan.getMenuButtonBoundingClientRect();
			// #endif
			// #ifdef MP-ALIPAY
			my.hideAddToDesktopMenu();
			// #endif
			uni.getSystemInfo({
				success: (res) => {
					this.width = obj.left || res.windowWidth;
					this.height = obj.top ? (obj.top + obj.height + 8) : (res.statusBarHeight + 44);
					this.top = obj.top ? (obj.top + (obj.height - 32) / 2) : (res.statusBarHeight + 6);
					// this.scrollH = res.windowWidth * 0.6
				}
			})
		},
		methods: {
			changeTab(vv){
				this.currentTab =vv.index;
				this.page=1;
				this.last_page=2;
				this.dataList=[];
				this.getList();
			},
			searchUser(){
				console.log(this.kw);
				this.page=1;
				this.last_page=2;
				this.dataList=[];
				this.getList();
			},
			tel(phone_number){
				if(!phone_number){return;}
				uni.makePhoneCall({
				    phoneNumber: phone_number //仅为示例
				});
			},
			getList(){
				let param={
					kw:this.kw,
					type:this.currentTab,
					page:this.page,
					...this.params
				};
				if(this.page > this.last_page){return;}
				this.tui.get('user/api/mlist',param).then(res=>{
					this.last_page = res.data.last_page;
					this.page++;
					this.total_user = res.data.total;
					this.dataList = [...this.dataList,...res.data.data];
				})
				
			},
			openPage(uri){
				uni.navigateTo({
					url:uri
				})
			},detail(mid){
				uni.navigateTo({
					url:'../customer/member?mid='+mid
				})
			},
			//抽屉动作
			closeDrawer(){
				this.visible=false;
			},closeShopDrawer(){
				this.visible_shop=false;
			},closeLeaderDrawer(){
				this.visible_leader=false;
			},getShopList(){
				this.tui.get('user/shop/lists').then(result=>{
					this.shop_list = result.data;
					this.visible_shop =true;
				})
			},choosThisShop(id,name){
				this.params.shop=id;
				this.filter.shop = name;
				this.visible_shop=false;
			},getLeaderList(){
				this.tui.get('user/shop/listleader',{shop:this.params.shop}).then(result=>{
					this.leader_list = result.data;
					this.visible_leader =true;
				})
			},choosThisLeader(id,name){
				this.params.leader=id;
				this.filter.leader = name;
				this.visible_leader=false;
			},getTagsList(){
				this.tui.get('user/setting/getTagsList').then(res=>{
					this.tagsList = res.data;
					this.oldTagsList = this.tagsList;
					this.showTagsSelectStatus=true;
				});
			},
			chooseTag(name){
				this.params.tag=name;
				this.filter.tag=name;
				this.showTagsSelectStatus=false;
				this.search_tag_val=''
				
			}
			,searchTag(e){
				let w = e.detail.value;
				if(w){
					let arr= this.oldTagsList;
					let new_arr = [{name:'结果',tags:[]}]
					for(let i=0;i<arr.length;i++){
						for (let x = 0; x < arr[i].tags.length; x++) {
							let word = arr[i].tags[x];
							if(word.indexOf(w)>-1){
								new_arr[0].tags.push(word);
							}
						}
					}
					this.tagsList = new_arr;
				}else{
					this.tagsList = this.oldTagsList;
				}
				
			},
			changeParams(f,v){
				// this.params[f]=v;
				this.$set(this.params,f,v);
				console.log(this.params);
			},
			clearParam(f){
				this.$set(this.params,f,'');
			},
			//获取等级列表
			getGroupList(){
				this.tui.get('user/setting/getgroup').then(res=>{
					if(res.code){
						this.group_list = res.data;
					}
				})
			},getSourceList(){
				this.tui.get('user/setting/memberSetting').then(res=>{
					if(res.code){
						this.source_list = res.data.member_form;
					}
				})
			},
			closeCity() {
				this.city_show = false;
			},
			showChooseCity(){
				this.city_show =true;
			},
			nextCity(e){
				if(e.layer >-1 && e.layer<2){
					this.tui.get('user/api/nextcity/code/'+e.value).then(res=>{
						this.citylist = res.data;
					});
				}else{
					this.citylist=[];
				}
			},
			
			chooseCity(e){
				// this.param.province_cn = e.result[0].text
				// this.param.province_id = e.result[0].value
				// this.param.city_cn = e.result[1].text
				// this.params.city = e.result[1].value
				// this.param.county_cn = e.result[2].text
				this.params.city = e.result[2].value
				this.closeCity();
				this.filter.city = e.result[0].text +'/'+e.result[1].text+'/'+e.result[2].text;
				setTimeout(() => {
					//重置数据
					this.resetCity++;
				}, 300);
			},
			//获取来源列表
			// 赛选的底部提交按钮
			sub(){
				// console.log(this.params);
				this.page=1;
				this.last_page=3;
				this.dataList=[];
				this.getList();
				this.closeDrawer();
			},
			rest(){
				this.params = this.old_params
				this.filter = this.old_filter
			}
		},
		onReachBottom: function() {
			this.getList();
		}
	}
</script>

<style>
	@import '/static/style/thorui.css';
	.header{
		background-repeat: no-repeat;
		background-size: 100% 80%;
	}
	.msg_ico image{width: 28px;}
	.my-money .rankings_ico image{width: 35px;}
	.search{
		height:90upx;padding: 40upx 20upx 20upx;
		display: flex;
		
	}
	.search .searchbox{
		display: block;border-radius: 80upx;padding: 16upx 0 16upx 40upx;
		background: #f6f6f6;overflow: auto;}

	.search .tui-input-title{width: 40upx;display: inline-block;min-width: 40upx;}
	.search .tui-input{width: 80%;display: inline-block;font-size: 28upx;}
	.search .btn-items{width: 140upx;padding-top: 16upx;}
	.search .btn-items .tui-icon{margin-left: 30upx;}
	.tui-item-box {
		width: 100%;
		display: flex;
		align-items: flex-start;
	}
	.tui-msg-pic {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		display: block;
		margin-right: 24rpx;
		flex-shrink: 0;
	}
	.tui-flex-box{
		width: 100%;
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
		justify-content: flex-start;
		align-items: flex-start;
	}
	.tel{
		position: absolute;
		top: 15px;
		right: 15px;
	}
	.tel .tel-ico{
		width: 30px;
		height: 30px;
	}
	.right-drawer >>>.tui-drawer-container_show{width: 90%;height:100vh; padding: 10px;box-sizing: border-box;}
	.right-drawer-container{height: 100vh;}
	.sel-li{align-items: center;line-height: 35px;font-size: 28upx;box-sizing: border-box;}
	.sel-li.under-line{border-bottom: 1px solid #ededed;margin-bottom: 10px;}
	.sel-li .li-text{margin-left: auto;margin-right: 10px;font-weight: 700;display: block;}
	.sel-li .tui-icon{margin-left: auto;display: block;}
	.sel-li .sel-option-box .sel-option-val{
		padding: 3px 8px;
		line-height: 1.5;
		background-color: #f1f1f1;
		border: 1px solid #f1f1f1;
		display: inline-block;
		margin: 5px;
		font-size: 12px;
		border-radius: 5px;
		box-sizing: border-box;
	}
	.sel-li .sel-option-box .sel-option-val.active{
		background-color: #f1cdce;
		border: 1px solid #fe1a4b;
		color: #fe1a4b;
		box-sizing: border-box;
	}
	.sel-li .input-box{
		
	}
	.sel-li .input-box input{
		border:1px solid #F1F1F1;
		display: inline-block;
		border-radius: 5px;
		width: 60px;
		text-align: center;
		font-size: 12px;
		padding: 3px;
	}
	.right-drawer .btn-group{
		padding: 0 15px;
		margin-bottom: 20px;
	}
	.right-drawer .btn-group view.rest{
		border-top-left-radius: 50px;
		border-bottom-left-radius: 50px;
		padding: 8px 25px;
		color: #333;
		font-size: 28upx;
		background-color: #e5e5e5;
	}.right-drawer .btn-group view.sub{
		border-top-right-radius: 50px;
		border-bottom-right-radius: 50px;
		padding: 8px 25px;
		font-size: 28upx;
		color: #FFF;
		background-color: #fc0f4a;
	}
	.tags-box{padding: 30upx;padding-top: 0; overflow-y: auto;height:100%;width: 100%;box-sizing: border-box;padding-bottom: 90px;}
	.tags-box .title{color:#fe1a4b;line-height: 35px;}
	.tags-box .lists .tag-one{color:#333;background-color: #EEEEEE;display: inline-block;padding: 10upx 16upx;margin-right: 20upx;margin-bottom: 20upx;font-size: 24upx;border-radius: 5px;}
	.tags-box .lists .tag-one.active{color:#fff;background-color: #fe1a4b;}
	.tag-btn{
		text-align: center;
		background-color: #fe1a4b;
		color: #FFFFFF;
		padding: 20upx;
	}
	.tag-drawer .searchbox{
		border: 1px solid #fe1a4b;
	    padding: 5px 15px;
	}
	.tag-drawer .searchbox input{
		font-size: 12px;
	}
	.key-val-sub{
		font-size: 10px;
		color: #ff0000;
	}
	.tui-header {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 20rpx;
		box-sizing: border-box;
		background-color: #fff;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		overflow: hidden;
		position: relative;
	}
	.tui-icon-close {
		position: absolute;
		right: 30rpx;
		top: 50%;
		transform: translateY(-50%);
	}
</style>
